.myGradesBox {
	width: 100%;
	height: 100%;
	padding: 20px 40px;
	overflow: auto;
	box-sizing: border-box;
	background: #fff;
	.grade-table {
		margin: 40px auto;
		table {
			width: 100%;
			margin: 0 auto;
			tbody {
				tr {
					box-shadow: 0px 0px 4px 4px #f9f9f9;
					border-radius: 3px;
					background-color: #fff;
					opacity: 100%;
					td {
						padding: 18px 20px;
						font-size: 12px;
						color: #414141;
						&:nth-child(2) {
							width: 260px;
						}
						&:nth-child(2) {
							width: 130px;
						}
						&:nth-child(3) {
							width: 130px;
						}
						&:nth-child(4) {
							width: 130px;
						}
						&:nth-child(5) {
							width: 130px;
						}
						.merge-invited {
							position: absolute;
							top: 12px;
							right: 20px;
							display: inline-block;
							background-color: #ff834d;
							width: 70px;
							height: 30px;
							color: #fff;
							line-height: 30px;
							text-align: center;
							border-radius: 3px;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
	.grade-info {
		margin: 20px auto;
		.info-left {
			float: left;
			width: 25%;
			margin-bottom: 5px;
		}
		.info-right {
			float: right;
			width: 75%;
			margin-bottom: 5px;
		}
		.clear {
			clear: both;
		}
	}
	.grade-box {
		box-shadow: 0px 0px 2px 2px #E8E8E8;
		padding: 40px 20px;
		.score-info-title {
			background-position: 0 10px;
			background-image: url("/static/image/score.png");
			background-repeat: no-repeat;
			padding: 5px 25px;
			color: #52458b;
			font-size: 14px;
		}
		.pull-right {
			float: right;
			.button-groups {
				margin-top: -5px;
				display: flex;
				flex-wrap: wrap;
				div {
					color: #fff;
					text-align: center;
					background-color: #fff;
					color: #BABABA;
					border: 1px solid #BABABA;
					padding: 6px 12px;
					&:first-child {
						border-top-left-radius: 3px;
						border-bottom-left-radius: 3px;
						border-right: none !important;
					}
					&:last-child {
						border-left: none !important;
						border-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
					}
					&:hover {
						cursor: pointer;
					}
					&:hover,
					&.active {
						background: #766BB2;
						border: 1px solid #766BB2;
						color: #fff;
					}
				}
			}
		}
		.score-table{
			width: 100%;
			margin-top: 40px;
			thead{
				border-bottom: 2px solid #D3D2D3;
			}
			th,td{
				&:first-child{
					width: 40%;
				}
				padding: 15px 0;
				text-align: left;
			}
			th{
				font-size: 14px;
				.company{
					width: 15px;
				    height: 15px;
				    padding: 0;
				    margin: 0;
				    display: -moz-inline-box;
				    display: inline-block;
				    line-height: 16px;
				    &.company_1{
				    	background: #D3D2D3;
				    }
				}
			}
			tr.last{
				td{
					span{
						color: white;
						padding: 2px 10px;
						background-color: #766BB2;
					}
					&:first-child{
						span{
							color: #766BB2;
							padding: 2px 0px;
							background-color: transparent;
						}
					}
					
				}
			}
		}
	}
	.grade-chart-list{

		margin-top: 30px;

		.grade-chart{
			width: 100%;
			position: relative;
			float: left;
			margin-bottom: 10px;

			&.half{
				width: 50%;
			}
			
			.title{
				padding: 5px 10px;
				font-size: 14px;

				&:before{
					content:"";
				    width:5px;
				    height:30px;
				    position:absolute;
				    top:0;
				    left:0;
				    background:#766BB2;
				}
			}

		}
	}
}
